<template>
	<view class="app-container">
		<view class="inviteuser-container">
			<!-- <image src="/static/qrcode.png" mode=""></image> -->
			<canvas id="qrcode" canvas-id="qrcode" style="width: 214px;height: 214px;margin: 0 auto;"></canvas>
			<div class="text1">邀请好友下载躺赚宝</div>
			<div class="text2">好友赚钱，您得奖励</div>

			<u-button text="立即分享" shape="circle" type="primary" @click="uniShare"></u-button>
			<div class="text3">{{`邀请ID：${shareId}`}}</div>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	import {
		upgradeAdmin
	} from '@/api/api.js'
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare();
	export default {
		onBackPress({
			from
		}) {
			if (from == 'backbutton') {
				this.$nextTick(function() {
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
		data() {
			return {}
		},
		onReady() {
			this.init()
		},
		computed: {
			shareId() {
				return this.$store.state.user.phone
			}
		},
		methods: {

			init() {
				upgradeAdmin({
					channel: 'starsmoon'
				}).then(res => {
					let qr = new UQRCode();
					// 设置二维码内容
					qr.data = res.data.versionUrl;
					// 设置二维码大小，必须与canvas设置的宽高一致
					qr.size = 214;
					// 调用制作二维码方法
					qr.make();
					// 获取canvas上下文
					let canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
					// 设置uQRCode实例的canvas上下文
					qr.canvasContext = canvasContext;
					// 调用绘制方法将二维码图案绘制到canvas上
					qr.drawCanvas();
				})

			},
			uniShare() {
				// uniShare.show({
				// 	content: { //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
				// 		type: 0,
				// 		href: 'https://uniapp.dcloud.io/',
				// 		title: '标题',
				// 		summary: '描述',
				// 		imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
				// 	},
				// 	menus: [{
				// 			"img": "/static/app-plus/sharemenu/wechatfriend.png",
				// 			"text": "微信好友",
				// 			"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
				// 				"provider": "weixin",
				// 				"scene": "WXSceneSession"
				// 			}
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/wechatmoments.png",
				// 			"text": "微信朋友圈",
				// 			"share": {
				// 				"provider": "weixin",
				// 				"scene": "WXSceneTimeline"
				// 			}
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/mp_weixin.png",
				// 			"text": "微信小程序",
				// 			"share": {
				// 				provider: "weixin",
				// 				scene: "WXSceneSession",
				// 				type: 5,
				// 				miniProgram: {
				// 					id: '123',
				// 					path: '/pages/list/detail',
				// 					webUrl: '/#/pages/list/detail',
				// 					type: 0
				// 				},
				// 			}
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/weibo.png",
				// 			"text": "微博",
				// 			"share": {
				// 				"provider": "sinaweibo"
				// 			}
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/qq.png",
				// 			"text": "QQ",
				// 			"share": {
				// 				"provider": "qq"
				// 			}
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/copyurl.png",
				// 			"text": "复制",
				// 			"share": "copyurl"
				// 		},
				// 		{
				// 			"img": "/static/app-plus/sharemenu/more.png",
				// 			"text": "更多",
				// 			"share": "shareSystem"
				// 		}
				// 	],
				// 	cancelText: "取消分享",
				// }, e => { //callback
				// })
			}
		}
	}
</script>

<style lang="scss">
	.inviteuser-container {
		text-align: center;
		padding: 120px 0;

		image {
			width: 214px;
			height: 214px;
		}

		.text1,
		.text2 {
			font-size: 14px;
			line-height: 20px;
		}

		.text1 {
			margin-top: 16px;
		}

		.text2 {
			margin-bottom: 50px;
		}

		.u-button {
			margin-bottom: 14px;
		}

		.text3 {
			font-size: 12px;
			color: #00b6fc;
		}
	}
</style>
